import { } from "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js";
// 1.在详情页面获取商品的sid - 列表传入一个sid到详情页
let $sid = location.search.substring(1).split("=")[1];
// sid不存在时，默认为1
if (!$sid) {
    $sid = "1";
}

const $picbox = $(".picbox");
const $smallpic = $(".smallpic");//小图
const $sf = $(".sf");//小放
const $bigpic = $(".bigpic");//大图
const $bf = $(".bf");//大放

const $title = $(".detail_right h3");//商品标题
const $price = $(".detail_right .price");//商品价格
const $quantity_num = $(".detail_right .quantity_num");//商品数量

const $list = $(".ulist ul"); //存放该商品的所有小图
let $liwidth = 0; //存放li的宽度
let $lilenth = 0; //所有li的个数



// 2.将当前的sid传给后端，后端返回sid对应的数据给前端。
$.ajax({
    url: "http://10.31.165.61/JS2012/mall360/php/getsid.php",
    data: {
        datasid: $sid
    },
    dataType: "json"
}).done(function (data) {
    $smallpic.attr("src", data.picurl);
    $bigpic.attr("src", data.picurl);
    $title.html(data.title);
    $price.html(data.price);

    $("title").html(data.title)

    // 渲染商品的所有小图片
    let $picarr = data.piclist.split(",");
    let $strHtml = "";
    $.each($picarr, function (index, value) {
        $strHtml += `
            <li>
                <img src="${value}"/>
            </li>
        `;
    });
    $list.html($strHtml);

    // 获取所有小图片的数量
    $lilenth = $picarr.length;
    // 获取小图片的一个宽度
    $liwidth = $(".ulist li").eq(0).outerWidth(true);

    if ($lilenth < 5) {
        $(".arrow_left").css("display", "none");
    }


    //设置小存放图片ul的宽度
    $list.width($lilenth * $liwidth);
});

// 3.放大镜效果
// 3.1鼠标移入小图，显示小放和大放
$picbox.hover(function () {
    $picbox.css("borderColor", "#ccc");
    $sf.css("visibility", "visible");
    $bf.css("visibility", "visible");

    // 3.2.计算小放的尺寸和比例
    $sf.width($picbox.outerWidth() * $bf.outerWidth() / $bigpic.outerWidth());
    $sf.height($picbox.outerHeight() * $bf.outerHeight() / $bigpic.outerHeight());
    let $bili = $bigpic.outerWidth() / $picbox.outerWidth();

    // 3.3.鼠标在小图里面移动，小放跟随鼠标
    $picbox.on("mousemove", function (ev) {
        let $leftvalue = ev.pageX - $picbox.offset().left - $sf.outerWidth() / 2;
        let $topvalue = ev.pageY - $picbox.offset().top - $sf.outerHeight() / 2;

        //限制移动范围
        if ($leftvalue < 0) {
            $leftvalue = 0;
        } else if ($leftvalue >= $picbox.outerWidth() - $sf.outerWidth()) {
            $leftvalue = $picbox.outerWidth() - $sf.outerWidth()
        }
        if ($topvalue < 0) {
            $topvalue = 0;
        } else if ($topvalue >= $picbox.outerHeight() - $sf.outerHeight()) {
            $topvalue = $picbox.outerHeight() - $sf.outerHeight()
        }

        // 赋值移动小放
        $sf.css({
            left: $leftvalue,
            top: $topvalue
        });
        //比例移动大图
        $bigpic.css({
            left: -$bili * $leftvalue,
            top: -$bili * $topvalue
        });

    })


}, function () {
    $picbox.css("borderColor", "transparent");
    $sf.css("visibility", "hidden");
    $bf.css("visibility", "hidden");
});


// 3.4.鼠标移入小图，切换大图。
// 无法获取渲染的元素，渲染的过程是异步的ajax，只能采用事件委托。
const $listul = $(".ulist ul");
$listul.on("mouseover", "li", function () {
    let $url = $(this).find("img").attr("src");
    $bigpic.attr("src", $url);
    $smallpic.attr("src", $url);
    $(this).css({
        borderColor: "#cdcdcd"
    });
})
$listul.on("mouseout", "li", function () {
    $(this).css({
        borderColor: "transparent"
    });
});


// 3.5.通过小图两侧的按钮，切换小图。
let $num = 5;//显示的张数



//左箭头
$(".arrow_right").on("click", function () {
    if ($num > 5) {
        $num--;
        $(".arrow_left").css("display", "block");//把右箭头显示
        if ($num === $lilenth) {//隐藏左箭头
            $(".arrow_right").css("display", "none");
        }
    }
    $(".samll_list ul").animate({
        left: -$liwidth * ($num - 5)
    });
});

//右箭头
$(".arrow_left").on("click", function () {
    if ($lilenth > $num) {
        $num++;
        $(".arrow_right").css("display", "block");//把右箭头显示
        if ($num === $lilenth) {//隐藏左箭头
            $(".arrow_left").css("display", "none");
        }
    }
    $(".samll_list ul").animate({
        left: -$liwidth * ($num - 5)
    });
});


// 4.购物车
// 利用本地存储或者cookie技术 - 跨页面操作
let $arrsid = [];//存储的商品编号
let $arrnum = [];//存储商品的数量

function getLocalStorage() {
    //判断本地存储是否已经存储有商品
    if (localStorage.getItem("localsid") && localStorage.getItem("localnum")) {
        //存在就获取里面的值
        $arrsid = localStorage.getItem("localsid").split(",");
        $arrnum = localStorage.getItem("localnum").split(",");
    } else {
        //不存在就清空数组
        $arrsid = [];
        $arrnum = [];
    }
}

// 4.1开始存储商品的编号和数量
const $join_btn = $(".join_btn");//加入购物车按钮
const $buy_btn = $(".buy_btn");//立即购买按钮
$join_btn.on("click", function () {
    getLocalStorage();//判断本地存储是否已经存储有商品

    // 点击加入购物车时显示已经添加成功的提示字，1秒后隐藏
    $(".shop_hint_box").show();
    setTimeout(function () {
        $(".shop_hint_box").hide();
    }, 1000);

    if ($arrsid.includes($sid)) {//本地存储的sid里面存在该商品id时，就添加数量
        let $index = $arrsid.indexOf($sid);
        $arrnum[$index] = +$arrnum[$index] + +$quantity_num.val();//加上当前选择的数量
        localStorage.setItem("localnum", $arrnum);//重新写入本地存储
    } else {//本地存储不存在该商品id时，添加id和数量
        $arrsid.push($sid);
        $arrnum.push($quantity_num.val());
        localStorage.setItem("localsid", $arrsid);//重新写入本地存储
        localStorage.setItem("localnum", $arrnum);//重新写入本地存储
    }
});
$buy_btn.on("click", function () {//立即购买
    getLocalStorage();
    if ($arrsid.includes($sid)) {
        let $index = $arrsid.indexOf($sid);
        $arrnum[$index] = +$arrnum[$index] + +$quantity_num.val();
        localStorage.setItem("localnum", $arrnum);
    } else {
        $arrsid.push($sid);
        $arrnum.push($quantity_num.val());
        localStorage.setItem("localsid", $arrsid);
        localStorage.setItem("localnum", $arrnum);
    }
    // 写入本地存储之后就跳转至购物车页面
    $(location).attr("href", "cartlist.html");
});



// 5.数量的加减
const $quantity_red = $(".quantity_red");//减
const $quantity_add = $(".quantity_add");//加
if ($quantity_num.val() == 1) {
    $quantity_red.css({
        background: "#fff",
        pointerEvents: "none"
    });
} else {
    $quantity_red.css({
        background: "#f6f6f6",
        pointerEvents: "auto"
    });
}

//加
$quantity_add.on("click", function () {
    let i = $quantity_num.val();
    i++;
    $quantity_num.val(i);
    if (i > 1) {
        $quantity_red.css({
            background: "#f6f6f6",
            pointerEvents: "auto"
        });
    }
});
//减
$quantity_red.on("click", function () {
    let i = $quantity_num.val();
    i--;
    $quantity_num.val(i);
    if (i == 1) {
        $quantity_red.css({
            background: "#fff",
            pointerEvents: "none"
        });
    }
});

$quantity_num.on("input", function () {
    let $reg = /^\d+$/;
    if (!$reg.test($(this).val())) {
        $(this).val(1);
    }
    //限制范围，最多为999,最少1
    if ($(this).val() >= 1000) {
        $(this).val(999);
    } else if ($(this).val() == 0) {
        $(this).val(1);
    }
});




